<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>滑动时钟</title>
    <style>
        body {
            text-align: center;
            background-color: #0e141b;
            color: rgba(224, 230, 235, 0.89);
            font-family: 'Roboto Condensed', sans-serif;
            font-weight: 100;
            overflow: hidden;
            width:100%;
            height:100%
        }
 
        .column,
        .colon {
            display: inline-block;
            vertical-align: top;
            font-size: 22px;
            line-height: 22px;
        }
 
        .column {
            -webkit-transition: -webkit-transform 300ms;
            transition: -webkit-transform 300ms;
            transition: transform 300ms;
            transition: transform 300ms, -webkit-transform 300ms;
        }
 
        .colon {
            -webkit-transition: -webkit-transform 300ms;
            transition: -webkit-transform 300ms;
            transition: transform 300ms;
            transition: transform 300ms, -webkit-transform 300ms;
            -webkit-transform: translateY(calc(50vh - 11px));
            transform: translateY(calc(50vh - 11px));
        }
 
        .colon:after {
            content: ':';
        }
 
        .num {
            -webkit-transition: opacity 500ms, text-shadow 100ms;
            transition: opacity 500ms, text-shadow 100ms;
            opacity: 0.025;
        }
 
        .num.visible {
            opacity: 1.0;
            
        }
 
        .num.close {
            opacity: 0.35;
        }
 
        .num.far {
            opacity: 0.15;
        }
 
        .num.distant {
            opacity: 0.1;
        }
    </style>
</head>
 
<body class="mdui-theme-layout-auto mdui-theme-color">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/css/mdui.min.css" />
<script src="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/js/mdui.min.js"></script>
    <div class="column">
        <div class="num">0</div>
        <div class="num">1</div>
        <div class="num">2</div>
    </div>
    <div class="column">
        <div class="num">0</div>
        <div class="num">1</div>
        <div class="num">2</div>
        <div class="num">3</div>
        <div class="num">4</div>
        <div class="num">5</div>
        <div class="num">6</div>
        <div class="num">7</div>
        <div class="num">8</div>
        <div class="num">9</div>
    </div>
    <div class="colon"></div>
    <div class="column">
        <div class="num">0</div>
        <div class="num">1</div>
        <div class="num">2</div>
        <div class="num">3</div>
        <div class="num">4</div>
        <div class="num">5</div>
    </div>
    <div class="column">
        <div class="num">0</div>
        <div class="num">1</div>
        <div class="num">2</div>
        <div class="num">3</div>
        <div class="num">4</div>
        <div class="num">5</div>
        <div class="num">6</div>
        <div class="num">7</div>
        <div class="num">8</div>
        <div class="num">9</div>
    </div>
    <div class="colon"></div>
    <div class="column">
        <div class="num">0</div>
        <div class="num">1</div>
        <div class="num">2</div>
        <div class="num">3</div>
        <div class="num">4</div>
        <div class="num">5</div>
    </div>
    <div class="column">
        <div class="num">0</div>
        <div class="num">1</div>
        <div class="num">2</div>
        <div class="num">3</div>
        <div class="num">4</div>
        <div class="num">5</div>
        <div class="num">6</div>
        <div class="num">7</div>
        <div class="num">8</div>
        <div class="num">9</div>
    </div>
    <script>
        'use strict';
 
        var size = 22;
        var columns = Array.from(document.getElementsByClassName('column'));
        var d = undefined,
            c = undefined;
        var classList = ['visible', 'close', 'far', 'far', 'distant', 'distant'];
        var use24HourClock = true;
 
        function padClock(p, n) {
            return p + ('0' + n).slice(-2);
        }
 
        function getClock() {
            d = new Date();
            return [use24HourClock ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(padClock, '');
        }
 
        function getClass(n, i2) {
            return classList.find(function(class_, classIndex) {
                return i2 - classIndex === n || i2 + classIndex === n;
            }) || '';
        }
 
        var loop = setInterval(function() {
            c = getClock();
 
            columns.forEach(function(ele, i) {
                var n = +c[i];
                var offset = -n * size;
                ele.style.transform = 'translateY(calc(50vh + ' + offset + 'px - ' + size / 2 + 'px))';
                Array.from(ele.children).forEach(function(ele2, i2) {
                    ele2.className = 'num ' + getClass(n, i2);
                });
            });
        }, 200 + Math.E * 10);
    </script>
 
</body>
 
</html>